<template>
    <DrawerPage :title="drawerTitle" width="700" v-model="drawerVal">
        <Collapse v-model="collapseValue" accordion>
            <Panel name="1">
                已学课程
                <div slot="content">
                    <Table highlight-row :columns="columns1" :data="drawerData1.list" border :loading="loadingTable1"></Table>
                    <Page :total="drawerData1.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                        :current="drawerQuery1.pageIndex"
                        :page-size="10"
                        @on-change="getCourseStatistics"
                        v-if="drawerData1.total > 0"/>
                </div>
            </Panel>
            <Panel name="2">
                已学课件
                <div slot="content">
                    <Table highlight-row :columns="columns2" :data="drawerData2.list" border :loading="loadingTable2"></Table>
                    <Page :total="drawerData2.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                        :current="drawerQuery2.pageIndex"
                        :page-size="10"
                        @on-change="getExpStatistics"
                        v-if="drawerData2.total > 0"/>
                </div>
            </Panel>
            <Panel name="3">
                参与考试
                <div slot="content">
                    <Table highlight-row :columns="columns3" :data="drawerData3.list" border :loading="loadingTable3"></Table>
                    <Page :total="drawerData3.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                        :current="drawerQuery3.pageIndex"
                        :page-size="10"
                        @on-change="getExamStatistics"
                        v-if="drawerData3.total > 0"/>
                </div>
            </Panel>
            <Panel name="4" v-if="false">
                参与竞赛
                <div slot="content">
                    <Alert type="warning" show-icon>
                        未进行积分计算的竞赛，无法展示基础分、奖励分与排名
                    </Alert>
                    <Table highlight-row :columns="columns4" :data="drawerData4.list" border :loading="loadingTable4"></Table>
                    <Page :total="drawerData4.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                        :current="drawerQuery4.pageIndex"
                        :page-size="10"
                        @on-change="(page) => getSceneStatistics(page, 'competition')"
                        v-if="drawerData4.total > 0"/>
                </div>
            </Panel>
            <Panel name="5" v-if="false">
                参与演练
                <div slot="content">
                    <Alert type="warning" show-icon>
                        未进行积分计算的演练，无法展示基础分、奖励分与排名
                    </Alert>
                    <Table highlight-row :columns="columns5" :data="drawerData5.list" border :loading="loadingTable5"></Table>
                    <Page :total="drawerData5.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                        :current="drawerQuery5.pageIndex"
                        :page-size="10"
                        @on-change="(page) => getSceneStatistics(page, 'drill')"
                        v-if="drawerData5.total > 0"/>
                </div>
            </Panel>
            <Panel name="6" v-if="false">
                  技能树
                  <div slot="content">
                      <Table highlight-row :columns="columns6" :data="drawerData6.list" border
                      :row-class-name="rowClassName" :loading="loadingTable6"></Table>
                      <Page :total="drawerData6.total" show-elevator showTotal style="text-align: right; margin-top: 10px;"
                          :current="drawerQuery6.pageIndex"
                          :page-size="10"
                          @on-change="getTreeStatistics"
                          v-if="drawerData6.total > 0"/>
                  </div>
              </Panel>
        </Collapse>
  </DrawerPage>
</template>

<script>
import { getCourseStatistics, getExpStatistics, getExamStatistics, newGetSceneStatistics, getTreeStatistics } from '@/api/excellentStudent'
import { parseDifficulty } from '@/libs/utils'

export default {
  props: {
      drawerUserId: { // 当前查询的用户I
          type: String,
          default: ''
      },
      drawerTitle: { // 当前组件的title
          type: String,
          default: ''
      }
  },
  data() {
      return {
          columns1: [
              {
                  title:'课程名称',
                  key:'name',
                  tooltip:true,
              },
              {
                  title:'难度',
                  key:'difficulty',
                  tooltip:true,
                  render:(h,params) => {
                      let difficulty = params.row.difficulty
                      let obj = parseDifficulty(difficulty) || {}
                      return h('span', {
                          style: {
                              color: obj.color
                          }
                      }, obj.text)
                  }
              },
              {
                  title:'基础分',
                  key:'basicScore',
                  tooltip:true,
              },
              {
                  title:'奖励分',
                  key:'rewardScore',
                  tooltip:true,
              },
              {
                  title:'学习状态',
                  key:'studyStatus',
                  tooltip:true,
              }
          ],
          columns2: [
              {
                  title:'课件名称',
                  key:'name',
                  tooltip:true,
              },
              {
                  title:'课件类型',
                  key:'type',
                  tooltip:true,
                  render:(h,params) => {
                      return h('span', {
                          style: {
                              color: params.row.type === 0 ? '#19be6b' : params.row.type === 1 ? '#2db7f5' : '#ff9900'
                          }
                      }, params.row.type === 0 ? '实操课件' : params.row.type === 1 ? '理论课件' : '文本课件')
                  }
              },
              {
                  title:'难度',
                  key:'difficulty',
                  tooltip:true,
                  render:(h,params) => {
                      let difficulty = params.row.difficulty
                      let obj = parseDifficulty(difficulty)
                      return h('span', {
                          style: {
                              color: obj.color
                          }
                      }, obj.text)
                  }
              },
              {
                  title:'基础分',
                  key:'basicScore',
                  tooltip:true,
              },
              {
                  title:'奖励分',
                  key:'rewardScore',
                  tooltip:true,
              },
              {
                  title:'学习状态',
                  key:'studyStatus',
                  tooltip:true,
              }
          ],
          columns3: [
              {
                  title:'考试名称',
                  key:'examinationName',
                  tooltip:true,
              },
              {
                  title:'试卷名称',
                  key:'paperName',
                  tooltip:true,
              },
              {
                  title:'类型',
                  key:'type',
                  tooltip:true,
                  render:(h,params) => {
                      return h('span', {
                          style: {
                              color: params.row.type === 0 ? '#19be6b' : params.row.type === 1 ? '#2db7f5' : '#ff9900'
                          }
                      }, params.row.type === 0 ? '考试' : params.row.type === 1 ? '自测' : '培训')
                  }
              },
              {
                  title:'基础分',
                  key:'basicScore',
                  tooltip:true,
              },
              {
                  title:'奖励分',
                  key:'rewardScore',
                  tooltip:true,
              },
              {
                  title:'成绩',
                  key:'grade',
                  tooltip:true,
                  render:(h,params) => {
                      let grade = params.row.grade
                      return h('span', !grade && grade !== 0 ? '未提交' : grade)
                  }
              }
          ],
          columns4: [
              {
                  title: `竞赛名称`,
                  key: 'name',
                  tooltip:true,
              },
              {
                  title: '基础分',
                  key: 'score',
                  tooltip:true,
                  render:(h,params) => {
                      let personalIntegral = params.row.score
                      return h('span', personalIntegral)
                  }
              },
              {
                  title: '奖励分',
                  key: 'rewardScore',
                  tooltip:true,
                  render:(h,params) => {
                      let personalIntegral = params.row.rewardScore
                      return h('span', personalIntegral)
                  }
              },
              {
                  title: '排名',
                  key: 'personalRank',
                  tooltip:true,
                  render:(h,params) => {
                      let personalRank = params.row.personalRank
                      return h('span', !personalRank && personalRank !== 0 ? '-' : personalRank)
                  }
              },
            //   {
            //       title: '分数类型',
            //       key: 'rate',
            //       tooltip:true,
            //       render:(h,params) => {
            //           return h('span', params.row.scoreType==0? '基础分':'奖励分')
            //       }
            //   },
              {
                  title: `竞赛类型`,
                  key: 'type',
                  tooltip: true,
                  render:(h,params) => {
                      return h('span', this.parseScene(params.row.type))
                  }
              },
          ],
          columns5: [
              {
                  title: `演练名称`,
                  key: 'name',
                  tooltip:true,
              },
              {
                  title: '基础分',
                  key: 'score',
                  tooltip:true,
                  render:(h,params) => {
                      let personalIntegral = params.row.score
                      return h('span', personalIntegral)
                  }
              },
              {
                  title: '奖励分',
                  key: 'rewardScore',
                  tooltip:true,
                  render:(h,params) => {
                      let personalIntegral = params.row.rewardScore
                      return h('span', personalIntegral)
                  }
              },
              {
                  title: '排名',
                  key: 'personalRank',
                  tooltip:true,
                  render:(h,params) => {
                      let personalRank = params.row.personalRank
                      return h('span', !personalRank && personalRank !== 0 ? '-' : personalRank)
                  }
              },
            //   {
            //       title: '分数类型',
            //       key: 'rate',
            //       tooltip:true,
            //       render:(h,params) => {
            //           return h('span', params.row.scoreType==0? '基础分':'奖励分')
            //       }
            //   },
              {
                  title: `演练类型`,
                  key: 'type',
                  tooltip: true,
                  render:(h,params) => {
                      return h('span', this.parseScene(params.row.type))
                  }
              },
          ],
          columns6: [
                {
                    type: 'expand',
                    width: 50,
                    render: (h, params) => {
                        return h('Table', {
                            props: {
                                columns: [
                                    {
                                        title: `节点名称`,
                                        key: 'name',
                                        tooltip:true,
                                    },
                                    {
                                        title: '积分',
                                        key: 'score',
                                    },
                                    {
                                        title: '学习时间',
                                        key: 'created',
                                        tooltip:true,
                                    },
                                ],
                                data: params.row.nodes,
                                maxHeight: '400px'
                            },
                            style: {
                                overflowY: 'auto'
                            }
                        })
                    }
                },
                {
                    title: `技能树名称`,
                    key: 'name',
                    tooltip:true,
                },
                {
                    title: '总积分',
                    key: 'score',
                },
                {
                    title: '学习时间',
                    key: 'created',
                    tooltip:true,
                },
          ],
          collapseValue: '1', 
          drawerVal: false,
          drawerData1: {
              list: [],
              total: 0
          },
          drawerData2: {
              list: [],
              total: 0
          },
          drawerData3: {
              list: [],
              total: 0
          },
          drawerData4: {
              list: [],
              total: 0
          },
          drawerData5: {
              list: [],
              total: 0
          },
          drawerData6: {
              list: [],
              total: 0
          },
          loadingTable1: false,
          loadingTable2: false,
          loadingTable3: false,
          loadingTable4: false,
          loadingTable5: false,
          loadingTable6: false,
          drawerQuery1: {
              pageIndex: 1
          },
          drawerQuery2: {
              pageIndex: 1
          },
          drawerQuery3: {
              pageIndex: 1
          },
          drawerQuery4: {
              pageIndex: 1
          },
          drawerQuery5: {
              pageIndex: 1
          },
          drawerQuery6: {
              pageIndex: 1
          },
      }
  },
  methods: {
    rowClassName(row) {
        if(row.nodes && row.nodes.length) {
            return ''
        }else {
            return 'hideExpandTable'
        }
    },
      show() {
          this.drawerVal = true
          this.$nextTick(() => {
              this.getCourseStatistics()
              this.getExpStatistics()
              this.getExamStatistics()
              this.getTreeStatistics()
              this.getSceneStatistics(1, 'competition')
              this.getSceneStatistics(1, 'drill')
          })
      },
      parseScene(type) {
          switch(Number(type)) {
              case 0: return '对抗演练'
              case 1: return '攻防赛'
              case 2: return '夺旗赛'
              case 3: return '知识赛'
              case 4: return '渗透演练'
              case 5: return '护网演练'
              case 6: return '应急防御演练'
              case 7: return '综合演练'
              case 8: return '攻防赛plus'
              case 9: return '运维赛'
          }
      },
      getCourseStatistics(pageIndex) {
          this.drawerQuery1.pageIndex = pageIndex || 1
          this.loadingTable1 = true
          getCourseStatistics({
              userId: this.drawerUserId,
              page: this.drawerQuery1.pageIndex,
              rows: 10
          }).then(({ code, message, attribute }) => {
              if (code !== 1) {
                  this.$Message.warning(message)
                  this.drawerData1.list = []
                  this.drawerData1.total = 0
                  return
              }
              this.drawerData1.list = attribute.dataList || []
              this.drawerData1.total = attribute.totalCount || 0
          }).catch(() => {
              this.$Message.error('查询已学课程详情异常')
          }).finally(() => {
              this.loadingTable1 = false
          })
      },
      getExpStatistics(pageIndex) {
          this.loadingTable2 = true
          this.drawerQuery2.pageIndex = pageIndex || 1
          getExpStatistics({
              userId: this.drawerUserId,
              pageIndex: this.drawerQuery2.pageIndex,
              pageSize: 10
          }).then(({ code, message, attribute }) => {
              if (code !== 1) {
                  this.$Message.warning(message)
                  this.drawerData2.list = []
                  this.drawerData2.total = 0
                  return
              }
              this.drawerData2.list = attribute.dataList || []
              this.drawerData2.total = attribute.totalCount || 0
          }).catch(() => {
              this.$Message.error('查询已学课件详情异常')
          }).finally(() => {
              this.loadingTable2 = false
          })
      },
      getExamStatistics(pageIndex) {
          this.loadingTable3 = true
          this.drawerQuery3.pageIndex = pageIndex || 1
          getExamStatistics({
              userId: this.drawerUserId,
              page: this.drawerQuery3.pageIndex,
              rows: 10
          }).then(({ code, message, attribute }) => {
              if (code !== 1) {
                  this.$Message.warning(message)
                  this.drawerData3.list = []
                  this.drawerData3.total = 0
                  return
              }
              this.drawerData3.list = attribute.dataList || []
              this.drawerData3.total = attribute.totalCount || 0
          }).catch(() => {
              this.$Message.error('查询参与考试详情异常')
          }).finally(() => {
              this.loadingTable3 = false
          })
      },
      getTreeStatistics(pageIndex) {
          this.loadingTable6 = true
          this.drawerQuery6.pageIndex = pageIndex || 1
          getTreeStatistics({
              userId: this.drawerUserId,
              page: this.drawerQuery6.pageIndex,
              rows: 10
          }).then(res => {
            // console.log('res',res)
              if (res.code !== 1) {
                  this.$Message.warning(res.message)
                  this.drawerData6.list = []
                  this.drawerData6.total = 0
                  return
              }
              this.drawerData6.list = res.data.items || []
              this.drawerData6.total = res.data.total || 0
          }).catch(() => {
              this.$Message.error('查询参与技能树详情异常')
          }).finally(() => {
              this.loadingTable6 = false
          })
      },
      getSceneStatistics(pageIndex, type) { // competition: 竞赛  drill: 演练
          let isCompetition = type === 'competition'
          isCompetition ? this.loadingTable4 = true : this.loadingTable5 = true
          isCompetition ? this.drawerQuery4.pageIndex = pageIndex || 1 : this.drawerQuery5.pageIndex = pageIndex || 1
          newGetSceneStatistics({
              userId: this.drawerUserId,
              pageIndex: isCompetition ? this.drawerQuery4.pageIndex : this.drawerQuery5.pageIndex,
              pageSize: 10,
              type: type === 'competition' ? 0 : 1
          }).then(({ code, message, data = {} }) => {
              if (code !== 1) {
                  this.$Message.warning(message)
                  if (isCompetition) {
                      this.drawerData4.list = []
                      this.drawerData4.total = 0
                  } else {
                      this.drawerData5.list = []
                      this.drawerData5.total = 0
                  }
                  return
              }
              if (isCompetition) {
                  this.drawerData4.list = data.items || []
                  this.drawerData4.total = data.total || 0
              } else {
                  this.drawerData5.list = data.items || []
                  this.drawerData5.total = data.total || 0
              }
          }).catch(() => {
              this.$Message.error(`查询参与${type === 'competition' ? '竞赛' : '演练'}详情异常`)
          }).finally(() => {
              isCompetition ? this.loadingTable4 = false : this.loadingTable5 = false
          })
      }
  },
  watch: {
      drawerVal(newVal) {
          if (!newVal) {
              this.collapseValue = '1'
              this.drawerQuery1 = {
                  pageIndex: 1
              }
              this.drawerQuery2 = {
                  pageIndex: 1
              }
              this.drawerQuery3 = {
                  pageIndex: 1
              }
              this.drawerQuery4 = {
                  pageIndex: 1
              }
              this.drawerQuery5 = {
                  pageIndex: 1
              }
          }
      }
  }
}
</script>
<style>
.hideExpandTable .ivu-table-cell-with-expand {
    display: none;
}
</style>